<html>
<head>
  <title>My App Engine App</title>
  <link rel="stylesheet" href="stylesheets/css.css" type="text/css" />
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAyQ5rDe50aG95yt8okchOIRRGTnp9Y63u1RQeL1bSdEARd0QT6xTDUHkt2JlcmDqPQj0cnqc-5aGOLA" type="text/javascript"></script>
  <script type="text/javascript"> 

  var map;
  var geocoder;
  var markersArray = [];

  function showAddress(reponse) {
    marker = new google.maps.Marker({
      position: response,
      map: map
    });
    marker.setMap(map);
  }

  function getAddress(address) {
    geocoder.getLatLng(address, 
      function(point) {
        if (!point) {
          alert(address + " not found");
        } else {
          var marker = new GMarker(point);
          map.addOverlay(marker);
        }
      }
    );
  }
  
  function addAllPeople() {
    // it is silly to use django for this, but, I don't know javascript well
    // so this is what I am going to try first
    {% for student in students %}
      getAddress("{{student.home}}");
    {% endfor %}
  }
  
  function initialize() {
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(37.4419, -122.1419), 0);
      geocoder = new GClientGeocoder();
      map.setUIToDefault();
    }
    addAllPeople();
    resizeApp();
  }

  </script>
</head>
  <!-- Note, hiding the overflow is a bit of a kludge to avoid letting people 
    know that we are going over the fold -->
  <body onload="initialize()" onunload="GUnload()" style="overflow: hidden" > 
    <header id="topbar"> 
      <form action="/add" method="post" >

        <input class="topbartext" type="text" name="studentname" value placeholder="Name"/>
        <input class="topbartext" type="text" name="studenthome" value placeholder="Home"/>
        <input class="topbarbutton" type="submit" value="Enter Student" style="align: right; "/>
      </form>
    </header>  



<div style="width: 400px; float: left; height: auto !important; overflow:off;">

    <!-- This is probably something that would be better done using javascript -->
    <table id="hor-zebra" summary="Employee Pay Sheet"> 
    <thead> 
    <tr> 
    <th scope="col">Student</th> 
    <th scope="col">Home</th> 
    </tr> 
    </thead> 
    <tbody> 
    {% for student in students %}
      {% if forloop.counter|divisibleby:2 %}
        <tr class="even"> 
      {% else %}
        <tr class="odd"> 
      {% endif %}
      <td>{{student.name}}</td> 
      <td>{{student.home}}</td> 
      </tr> 
    {% endfor %}
    </tbody> 
    </table> 
</div>
<!-- start at a size of 100% before being resized, since 100% isn't far off of 
      the actual size -->
<div style="margin-left: 400px; height:100%; " id="map_canvas" >
</div>

  </body>
</html>
